﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - DataGrid</title>

    <link href="../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>

    <script src="../../jeasyui-extensions/jeasyui.extensions.textbox.js"></script>

    <script type="text/javascript">
        $(function () {
            
            var t = $("#t1").datagrid({
                //title: 'test datagrid',
                //width: 1200,
                //height: 400,
                fit: true,
                border: false,
                method: "get",
                url: "../../examples/datagrid/datagrid-data.json",
                idField: 'ID',
                remoteSort: false,
                pagination: true,
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'Code', title: '编号(Code)', width: 120 },
                    { field: 'Name', title: '名称(Name)', width: 140},
                    { field: 'Age', title: '年龄(Age)', width: 120 },
                    { field: 'Height', title: '身高(Height)', width: 140 },
                    { field: 'Weight', title: '体重(Weight)', width: 140 },
                    { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180 },
                    { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                ]]
            });

        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div data-options="region: 'south', title: 'south', split: true" style="height: 100px;"></div>
    <div data-options="region: 'west', title: 'west', split: true" style="width: 200px;"></div>

    <div data-options="region: 'center', title: 'center', split: true">

        <table id="t1" ></table>

    </div>

    <div data-options="region: 'east', title: 'east', split: true" style="width: 200px;"></div>
    <div data-options="region: 'north', title: 'north', split: true" style="height: 100px;"></div>
</body>
</html>
